<template>
  <view class="rank-list">
    <view class="rank-header">
      <text class="title">排行榜</text>
      <text class="subtitle">TOP {{rankings.length}}</text>
    </view>
    
    <view class="rank-content">
      <view 
        v-for="(item, index) in rankings" 
        :key="index"
        class="rank-item"
        :class="{'current-user': item.isCurrentUser}"
      >
        <view class="rank-index" :class="{'top3': index < 3}">
          {{index + 1}}
        </view>
        <image class="avatar" :src="item.avatar || defaultAvatar" mode="aspectFill"/>
        <view class="user-info">
          <text class="nickname">{{item.nickname || '匿名用户'}}</text>
          <text class="date">{{item.date}}</text>
        </view>
        <view class="score">{{item.score}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RankList',
  props: {
    rankings: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultAvatar: '/static/images/default-avatar.png'
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.rank-list {
  width: 100%;
  background-color: @bg-color;
  border-radius: @border-radius-lg;
  padding: @spacing-lg;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  
  .rank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @spacing-lg;
    
    .title {
      font-size: @font-size-xl;
      font-weight: bold;
      color: @text-color;
    }
    
    .subtitle {
      font-size: @font-size-sm;
      color: @text-color-light;
    }
  }
  
  .rank-content {
    .rank-item {
      display: flex;
      align-items: center;
      padding: @spacing-md;
      border-bottom: 1px solid @border-color;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.current-user {
        background-color: fade(@primary-color, 10%);
      }
      
      .rank-index {
        width: 40rpx;
        text-align: center;
        font-size: @font-size-md;
        color: @text-color-light;
        
        &.top3 {
          font-weight: bold;
          font-size: @font-size-lg;
        }
        
        &:nth-child(1) {
          color: #f1c40f;
        }
        
        &:nth-child(2) {
          color: #bdc3c7;
        }
        
        &:nth-child(3) {
          color: #e67e22;
        }
      }
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin: 0 @spacing-md;
      }
      
      .user-info {
        flex: 1;
        
        .nickname {
          font-size: @font-size-md;
          color: @text-color;
          margin-bottom: @spacing-xs;
        }
        
        .date {
          font-size: @font-size-sm;
          color: @text-color-light;
        }
      }
      
      .score {
        font-size: @font-size-lg;
        color: @primary-color;
        font-weight: bold;
      }
    }
  }
}
</style> 